{% load staticfiles %}
{% load bootstrap3 %}
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>尘归尘{% block title %}{% endblock title %}</title>
    <link rel="icon" type="image/png" href="static/qa/icon.ico">
    <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
    <!-- <link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'> -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="{% static 'css/qa.css' %}" rel="stylesheet"/>
  </head>
  <body>
    <div class="topbar"></div>
    <br>
    <div class="container">
        <div class="row">
            <div class="text-right">
                {% if user.is_authenticated %}
                    <strong style="color: #337ab7">{{ user.username }}</strong>
                    <a href="{% url 'logout' %}">注 销</a>
                    <!-- {% if user.is_superuser %}
                        <a href="{% url 'admin:index' %}">管理面板</a>
                    {% endif %} -->
                {% else %}
                    <a href="{% url 'login' %}">登 录</a>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="container">
      <div class="page-header">
	<a class="btn btn-md btn-warning pull-right" href="#search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查一下 </a><a class="btn btn-md btn-primary pull-right" href="{% url 'qa_create_question' %}"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>问一下</a><h1><a href="{% url 'qa_index' %}"><img width="50px" src="http://icons.iconarchive.com/icons/seanau/flat-app/256/Questionmark-icon.png" /><orange>等你来提问</orange> </a><small>无所不知</small></h1>
      </div>
    </div>

    <div class="container">
      {% if messages %}
      {% for message in messages %}
      <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}</div>
      {% endfor %}
      {% endif %}
      {% block content %}

      {% endblock content %}
      <div id="search">
      	<button type="button" class="close">×</button>
      	<form method="GET" action="{% url 'qa_search' %}">
      	  <input type="search" value="" name="word" placeholder="你想找什么呢？" />
      	  <input class="btn btn-lg btn-warning" type="submit" value="查找" />
      	</form>
	
      </div>
    </div>
    <hr>
    <center>
      <a href="http://www.djangoproject.com/"><img src="https://www.djangoproject.com/m/img/badges/djangoproject120x25.gif" border="0" alt="A Django project." title="A Django project." /></a> ·
      <a href="https://gitee.com/dragon417/">Github</a> ·
      <a data-toggle="modal" data-target="#apiModal">API</a> ·
      <small><a href="/admin">管理面板</a></small></center>
      <br/><br/>


    <!-- Modal -->
    <div class="modal fade" id="apiModal" tabindex="-1" role="dialog" aria-labelledby="APIModal" aria-hidden="true">
      <div class="modal-dialog">
	  <div class="modal-content">
	  <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> API Access</h4>
	  </div>
	  <div class="modal-body">
            <ul>
              <li>
		<b>问题清单</b>
		<br/>重新排列问题清单.
		<br/>json URL : <code class="custom-code">http://djangoqa.azurewebsites.net/api/questions/?format=json</code>
              </li>
              <br/>
              <li>
		<b>用户列表</b>
		<br/>检索用户列表.
		<br/>json URL : <code class="custom-code">http://djangoqa.azurewebsites.net/api/users/?format=json</code>
              </li>
            </ul>
	  </div>
	  <div class="modal-footer">
            <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
	  </div>
	</div>
      </div>
    </div>

    {% block js %}
    <script>
      $(function () {
      $('a[href="#search"]').on('click', function(event) {
      event.preventDefault();
      $('#search').addClass('open');
      $('#search > form > input[type="search"]').focus();
      });

      $('#search, #search button.close').on('click keyup', function(event) {
      if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
      $(this).removeClass('open');
      }
      });

      });
    </script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    {% endblock js %}
    {%block extra_js %}{% endblock extra_js %}

  </body>
</html>
